<template>
  <div
    ref="c__window"
    class="c__window"
    :class="{ is_active: isActive }"
    :style="windowStyle"
    @mousedown="handleWindowMouseDown"
  >
    <div
      class="title"
      @mousedown="handleDragStart($event)"
      @mouseup="handleDragEnd"
      @click="restoreWindow"
    >
      {{ title }}
    </div>
    <div v-show="!isMinimize" class="controls">
      <div class="controls--btn" @click="handleMinimize">
        <minus-icon />
      </div>
      <div class="controls--btn" @click="handleMaximize">
        <stop-icon />
      </div>
      <div class="controls--btn is_close" @click="handleClose">
        <x-mark-icon />
      </div>
    </div>
    <div v-show="!isMinimize" class="content">
      <dynamic-chart
        :sensors-name="title"
        :type="type"
        :member-id="memberId"
        :units="units"
        :lower-caution="lowerCaution"
        :upper-caution="upperCaution"
        :lower-critical="lowerCritical"
        :upper-critical="upperCritical"
        :current-value="currentValue"
        @send-chart-box="syncChartSize"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { MinusIcon, StopIcon, XMarkIcon } from '@heroicons/vue/24/outline';
import DynamicChart from '@/components/global/DynamicChart.vue';

const emit = defineEmits(['active', 'close', 'minimize', 'maximize']);

const props = defineProps<{
  title: string;
  type: string;
  memberId: string;
  units: string;
  lowerCaution: number;
  upperCaution: number;
  lowerCritical: number;
  upperCritical: number;
  currentValue: number;
  isActive: boolean;
  isMinimize: boolean;
  isMaximize: boolean;
  miniWidth: number;
  miniLeft: number;
}>();

const height = ref(550);
const width = ref(1050);
const dragging = ref(false);
const x = ref(Math.random() * 50 + 50);
const y = ref(Math.random() * 50 + 50);
const ox = ref(0);
const oy = ref(0);
const sx = ref(0);
const sy = ref(0);

const c__window = ref();

const windowStyle = computed(() => {
  if (props.isMaximize) {
    return {
      left: 0,
      right: 0,
      top: '60px',
      bottom: 0,
      borderRadius: '0',
      zIndex: 1003,
    };
  } else if (props.isMinimize) {
    return {
      left: props.miniLeft + `px`,
      bottom: 0,
      minWidth: props.miniWidth + `px`,
      minHeight: `40px`,
      width: props.miniWidth + `px`,
      height: `40px`,
      zIndex: props.isActive ? 1002 : 1001,
    };
  } else {
    return {
      left: `${x.value}px`,
      top: `${y.value}px`,
      width: `${width.value}px`,
      height: `${height.value}px`,
      zIndex: props.isActive ? 1002 : 1001,
    };
  }
});
const handleMouseMove = (event: MouseEvent) => {
  if (dragging.value) {
    x.value = ox.value + event.clientX - sx.value;
    y.value = oy.value + event.clientY - sy.value;
  }
};

onMounted(() => {
  window.addEventListener('mousemove', handleMouseMove);
});

onBeforeUnmount(() => {
  window.removeEventListener('mousemove', handleMouseMove);
});

const handleDragStart = (event: MouseEvent) => {
  sx.value = event.clientX;
  sy.value = event.clientY;
  ox.value = x.value;
  oy.value = y.value;
  dragging.value = true;
};
const handleDragEnd = () => {
  dragging.value = false;
};
const handleWindowMouseDown = () => {
  emit('active');
};
const handleClose = () => {
  emit('close');
};
const handleMinimize = () => {
  emit('minimize');
};
const handleMaximize = () => {
  emit('maximize');
};
const syncChartSize = (echart: echarts.ECharts) => {
  var objResizeObserver = new ResizeObserver((entries) => {
    var entry = entries[0];
    var cr = entry.contentRect;
    if (echart) {
      echart.resize({
        width: cr.width * 0.9,
        height: cr.height * 0.95,
      });
    }
  });
  objResizeObserver.observe(c__window.value);
};
const restoreWindow = () => {
  if (props.isMinimize) {
    handleMinimize();
  }
};
</script>

<style scoped>
.c__window {
  min-width: 300px;
  min-height: 200px;
  display: grid;
  position: fixed;
  grid-template-areas: 'a b' 'c c';
  grid-template-rows: 40px 1fr;
  grid-template-columns: 1fr auto;
  border-radius: 8px;
  box-shadow: 2px 2px 6px #0003;
  background: linear-gradient(-10deg, #ccc, #fff);
  overflow: hidden;
  resize: both;
}
.c__window.is_active {
  background: linear-gradient(-10deg, #ccc 0%, #fff 80%, #ecf4ff 100%);
  box-shadow: 2px 2px 6px #0009;
  z-index: 1002;
}
.title {
  display: grid;
  grid-area: a;
  align-items: center;
  padding: 0 1em;
  color: #222;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.controls {
  display: grid;
  grid-area: b;
  grid-template-columns: repeat(3, 40px);
}
.controls--btn {
  display: grid;
  align-items: center;
  justify-items: center;
  transition: 0.2s;
  background: #fff0;
  cursor: pointer;
  user-select: none;
}
.controls--btn.is_close:hover {
  background: #f00;
}
.controls--btn:hover {
  background: #0002;
}
.controls--btn > img {
  width: 36%;
  height: 36%;
}
.content {
  position: relative;
  grid-area: c;
}
</style>
